<template>
    <div id="app">
        <!--keep-alive组件是vue内置的组件 能够将组件切换过程中的状态保存在内存中 防止重复渲染DOM -->
        <keep-alive exclude="Detail,home" >
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
  // .vue文件就是一个单文件vue组件： template是模板的内容，  script中的export default暴露组件的data 和 methods等等属性

  
  export default {
    // vue实例的初始化数据
    data: function () {
      return {
     
      }
    },
    // 注册子组件
    components: {
    
    },
    // vue实例的方法
    methods: {
   
    },
    // 计算属性，可以对重复需要计算的数据进行保存使用 提高性能
    computed: {
    
    
    },
    //  vue实例的生命周期 llifeCycel
    //  创建期
    beforeCreate () {
      //  组件在被创建之间的钩子
    },
    created () {
      // 组件创建完成 组件的数据初始化完成但是还未挂载到DOM中
    },
    beforeMount () {
      //  组件被挂载之前钩子
    },
    mounted () {
      // 组件挂载完成之后钩子
    },
    //  存在期
    beforeUpdate () {
      //   由于数据更新导致dom重新渲染之前的钩子函数
    },
    updated () {
      //  组件完成数据更新和渲染
    },
    beforeDestroy () {
      //  组件被销毁之前的 钩子
    },
    destroyed () {
      //  组件别销毁之后
    },
    
  }
</script>


<style lang="stylus">
    .arrowR {
        /* 将容器设置为伸缩盒 */
        display: flex;
        /* 容器中的元素两边对齐 元素之间间隔相等 */
        justify-content: space-between;
        align-items: center;
        &:after {
            content: "";
            width: 22px;
            height: 22px;
            border-top: 3px solid rgb(167, 167, 167);
            border-right: 3px solid rgb(167, 167, 167);
            transform: rotate(45deg);
        }
    }
 
    .arrowL {
        /* 将容器设置为伸缩盒 */
        display: flex;
        /* 容器中的元素两边对齐 元素之间间隔相等 */
        justify-content: space-between;
        align-items: center;
        &:after {
            $arrowColor= #fff
            $arrowWH = 13px
            content: "";
            width: $arrowWH
            height: $arrowWH
            border-top: 3px solid $arrowColor
            border-right: 3px solid $arrowColor
            transform: rotate(-135deg);
        }
    }


</style>
